<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>

<!--页面内容开始-->
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>经费列表</h5>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <div class="m-l-xs toolbar" id="moneyinfodetail_table_toolbar">
                            <form role="form" id="moneyinfodetail_query_form" class="form-inline">
                                <div class="form-group m-r-xs">
                                    <label for="moneyinfodetail_moneyTypeCode" class="sr-only">经费类型</label>
                                    <select class="form-control" id="moneyinfodetail_moneyTypeCode"
                                            name="moneyTypeCode">
                                        <option value="">-- 请选择 --</option>
                                        <option value="001">直接支付</option>
                                        <option value="002">授权支付</option>
                                        <option value="003">自有资金</option>
                                    </select>
                                </div>
                                <div class="form-group m-r-xs">
                                    <label for="moneyinfodetail_key" class="sr-only">预算项目</label>
                                    <input type="text" class="form-control" id="moneyinfodetail_key"
                                           name="key" placeholder="预算项目/经济分类">
                                </div>
                                <div>
                                    <button class="btn btn-primary" type="button"
                                            onclick="moneyinfodetailObj.refreshTable()">查询
                                    </button>
                                    <button class="btn btn-white" type="button"
                                            onclick="moneyinfodetailObj.resetTable()">重置
                                    </button>
                                    <button class="btn btn-primary" type="button"
                                            onclick="moneyinfodetailEditObj.init()">新增
                                    </button>
                                </div>
                            </form>
                        </div>
                        <table id="moneyinfodetail_table" class="table table-striped"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页面内容结束-->
<!--弹窗：经费编辑-->
<div th:replace="web/money/cur/moneyinfodetail-edit::moneyinfodetailEdit"></div>
<!--弹窗：经费附件-->
<div th:replace="web/money/cur/moneyinfodetail-attach::moneyinfoetailAttach"></div>

<script type="text/javascript">
    $(function () {
        moneyinfodetailObj.myTable = $('#moneyinfodetail_table').bootstrapTable({
            toolbar: '#moneyinfodetail_table_toolbar',
            pagination: true,
            sidePagination: 'server',
            method: 'post',
            queryParams: function (param) {
                param.moneyTypeCode = $("#moneyinfodetail_moneyTypeCode").val();
                param.key = $('#moneyinfodetail_key').val();
                return param;
            },
            url: "/money/cur/moneyinfodetail",
            formatNoMatches: function () {  //没有匹配的结果
                return '暂无数据';
            },
            columns: [{
                title: '#',
                align: 'center',
                width: 50,
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                title: '经费类型',
                field: 'moneyTypeName'
            }, {
                title: '预算项目',
                field: 'projectName',
                formatter: function (value, row, index) {
                    return value + `(${row.projectCode})`;
                }
            }, {
                title: '经济分类',
                field: 'cateName',
                formatter: function (value, row, index) {
                    return value + `(${row.cateCode})`;
                }
            }, {
                title: '金额',
                field: 'money',
                formatter: function (value, row, index) {
                    return $.moneyFormat(value);
                }
            }, {
                title: '状态',
                field: 'state',
                formatter: function (value, row, index) {
                    let str = "";
                    if (row.state == 0) {
                        str = `<span class="badge badge-primary">新增</span>`;
                    } else if (row.state == 1) {
                        str = `<span class="badge badge-warning">已审核</span>`;
                    } else if (row.state == 2) {
                        str = `<span class="badge badge-success">已激活</span>`;
                    } else if (row.state == 3) {
                        str = `<span class="badge">已作废</span>`;
                    }
                    return str;
                }
            }, {
                title: '创建时间',
                field: 'createTime'
            }, {
                title: '操作',
                width: 200,
                events: {
                    'click .copy': function (e, value, row, index) {
                        moneyinfodetailEditObj.init(row.id, true)
                    },
                    'click .attach': function (e, value, row, index) {
                        moneyinfoetailAttachObj.init(row.id)
                    },
                    'click .edit': function (e, value, row, index) {
                        moneyinfodetailEditObj.init(row.id)
                    },
                    'click .trash': function (e, value, row, index) {
                        moneyinfodetailObj.deleteHandle(row.id)
                    }
                },
                formatter: function (value, row, index) {
                    var opers = [];
                    opers.push(`<a class="copy btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="复制">
                                    <i class="fa fa-copy"></i>
                                </a>`)
                    opers.push(`<a class="attach btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="附件">
                                    <i class="fa fa-file"></i>
                                </a>`)
                    if (row.state == 0) {
                        opers.push(`<a class="edit btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="编辑">
                                    <i class="fa fa-edit"></i>
                                </a>`)
                        opers.push(`<a class="trash btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="删除">
                                    <i class="fa fa-trash"></i>
                                </a>`)
                    }

                    return opers.join('');
                }
            }],
            responseHandler: function (res) {
                return {
                    total: res.page.totalCount,
                    rows: res.page.list
                };
            },
            onLoadSuccess: function (data) {
                $('[data-toggle="tooltip"]').tooltip()
            }
        });
    })
    var moneyinfodetailObj = new Object({
        myTable: undefined,
        queryForm: {
            deptCode: undefined,
            projectName: undefined,
            cateName: undefined
        },
        refreshTable: function () {
            this.myTable.bootstrapTable('refresh')
        },
        resetTable: function () {
            $('#moneyinfodetail_query_form')[0].reset();
            this.refreshTable();
        },
        deleteHandle: function (id) {
            let _self = this;
            let ids = id ? [id] : _self.myTable.bootstrapTable('getSelections');
            $.mySwalConfirm("将删除经费，确认吗？", function () {
                $.myDelete({
                    url: `/money/cur/moneyinfodetail`,
                    dataType: 'json',
                    data: ids,
                    success: function (data) {
                        if (data && data.code === 0) {
                            toastr.success(data.msg, '操作提示')
                            _self.refreshTable();
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            });
        }
    })
</script>
</body>
</html>